// 和vue不同之处--这是一个组件
import React, { Component } from 'react'
import { Switch, Route, Redirect } from 'react-router-dom'

// 引入要显示的组件
import ComAFn from '../components/ComAFn'
import ComBClass from '../components/ComBClass'
import ComBig from '../components/ComBig'
import ComFather from '../components/ComFather'
import Index from '../components/Index'
import List from '../components/List'
import Detail from '../components/Detail'
import Layout from '../components/Layout'
import NotFound from '../components/NotFound'

// 改为懒加载的方式
// const ComAFn = React.lazy(()=>('../components/ComAFn'))
// const ComBClass = React.lazy(()=>('../components/ComBClass'))
// const ComBig = React.lazy(()=>('../components/ComBig'))
// const ComFather = React.lazy(()=>('../components/ComFather'))
// const Index = React.lazy(()=>('../components/Index'))
// const List = React.lazy(()=>('../components/List'))
// const Detail = React.lazy(()=>('../components/Detail'))
// const Layout = React.lazy(()=>('../components/Layout'))
// const NotFound = React.lazy(()=>('../components/NotFound'))

export default class Router extends Component {
    render() {
        return (
            // fallback:后备 备用   Suspense：悬念
            <React.Suspense fallback={<h1><mark>Loading....</mark></h1>}>
                <Switch>
                    {/* 匹配的方式：url中是否包含组件的path 如果包含就认为匹配成功 显示当前组件 不在向后匹配  */}
                    {/* exact 精确匹配 字符串完全相同 */}
                    <Route path="/" exact component={Index}></Route>
                    {/* <Route path="/afn" component={ComAFn}></Route> */}
                    <Route path="/afn" render={()=>{
                        if(!localStorage.getItem('hasLogin')) {
                            // 没有登录 去首页
                            return <Redirect to="/"></Redirect>
                        }else {
                            // 登录了 可以正常访问ComAFn
                            return <ComAFn></ComAFn>
                        }
                    }}></Route>
                    <Route path="/bclass" component={ComBClass}></Route>
                    <Route path="/big" component={ComBig}></Route>
                    <Route path="/father" component={ComFather}></Route>
                    {/* 不要加exact 否则判断方式就是：/layout/son2===/layout */}
                    {/* 这里需要的判断模式是包含 而不是 相等 */}
                    <Route path="/layout" component={Layout}></Route>
                    <Route path="/list" component={List}></Route>
                    <Route path="/detail/:name" component={Detail}></Route>
                    {/* 重定向 会修改页面地址 */}
                    {/* <Route path="/404" component={NotFound}></Route>
                    <Redirect to="/404"></Redirect> */}
                    {/* 直接显示 不会重定向 */}
                    {/* path="*" 可以省略 不写同样表示匹配所有地址 */}
                    <Route component={NotFound}></Route>
                </Switch>
            </React.Suspense>
        )
    }
}
// 路由组件和非路由组件 在路文件中被<Route>组件包裹起来的才是路由组件，才会有路由对应的属性和方法
// 非路由组件可以通过withRouter解决
// withRouter是高阶组件（HOC--higherOrderComponent）高阶组件是参数为组件，返回值为新组件的函数。
// 高阶组件的作用是强化老的组件 返回一个新的 经过加工后的组件
// vue中的mixin 小程序中的behaviors react中的hoc  作用一致 都是为了给组件增加一些属性和方法
// const ComPlus = withRouter(ComPure)
// {
//     crated(),
//     data:{},
//     methods: {
//         fn{}
//     }
// }

// Behaviors({
//     data: {},

// })
